<template>
  <view class="container">
    <u-toast ref="uToastRef"></u-toast>
    <shop-swiper :list="goods.images.split(';')" height="800"></shop-swiper>
    <view class="content">
      <view class="price">
        ￥{{ goods.price }}
      </view>
      <view class="title">
        {{ goods.name }}
      </view>
      <view v-if="userType != 2" class="info">
        <view class="name">配送</view>
        <view class="address-item" @tap="show = true">
          <u-icon name="map" size="48"></u-icon>
          <view class="address">
            <up-text :text="address || '请选择你的配送地址'" color="#96979f" lines="1" size="24"></up-text>
          </view>
          <view class="right">
            <u-icon name="arrow-right" size="48"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view v-if="userType != 2" class="operation">
      <view class="cart">
        <view>
          <u-icon name="shopping-cart" size="48"></u-icon>
        </view>
        <view class="text">购物车</view>
      </view>
      <view class="button">
        <u-button text="加入购物车" type="warning" @click="addCart"></u-button>
      </view>
      <view class="button">
        <u-button text="立即购买" type="error" @click="doOrder"></u-button>
      </view>
    </view>
    <u-popup :round="10" :show="show" @close="show = false" @open="show = true">
      <view>
        <view
            v-for="(address,index) in addressList"
            :key="index"
            class="address-item"
        >
          <view class="address">{{ address.address }}</view>
          <view class="people">
            <view class="name">{{ address.name }}</view>
            <view class="phone">{{ address.phone }}</view>
            <view v-if="address.isDefault" class="tag">
              <u-tag size="mini" text="默认" type="error"></u-tag>
            </view>
          </view>
          <view class="select">
            <u-button size="44" text="选择" type="error" @click="selectAddress(address)"></u-button>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts" setup>
import {computed, ref} from "vue";
import type {Goods} from "@/interfaces/goods";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {useAddCartApi, useGetUserAddressApi} from "@/services/api";
import {useStore} from "vuex";
import type {AddressInfo} from "@/interfaces/user";
import type {AddCart} from "@/interfaces/cart";

const uToastRef = ref()
const show = ref<boolean>(false)
const store = useStore()
const userType = computed(() => store.getters['auth/getType'])
const goods = ref<Goods>({
  id: 0,
  images: "",
  name: "",
  price: 0,
  status: 0,
  stock: 0,
  userId: ""
})
const address = ref<string>('')
const addressList = ref<AddressInfo[]>([])
const doOrder = () => {
  uni.$u.route({
    url: '/pages/order/order',
    params: {
      data: JSON.stringify([goods.value])
    }
  })
}
const selectAddress = (item: AddressInfo) => {
  address.value = item.address
  show.value = false
}
const addCart = async () => {
  const data: AddCart = {
    userId: store.getters["auth/getUserId"],
    goodsId: goods.value.id,
  }
  await useAddCartApi(data)
  uToastRef.value.show({
    message: '添加成功',
    type: 'success',
    duration: 1000
  })
}
const init = async () => {
  const {data: res} = await useGetUserAddressApi({userId: store.getters["auth/getUserId"]})
  addressList.value = res.addressList
  address.value = res.addressList.filter((value: AddressInfo) => value.id == res.defaultId)[0].address
}
onShow(() => {
  init()
})
onLoad((query) => {
  goods.value = query as Goods
})
</script>


<style lang="scss" scoped>
.container {
  min-height: 100vh;
  width: 100vw;
  background-color: #edf2fd;
  display: flex;
  flex-direction: column;

  .content {
    min-height: calc(100vh - 800rpx - 90px);
    padding: 12px;
    display: flex;
    flex-direction: column;

    .price {
      padding: 12px 24px;
      background-color: #f32022;
      border-radius: 24px 24px 0 0;
      color: #ffffff;
      font-size: 24px;
    }

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0 0 24px 24px;
      background-color: #ffffff;
      padding: 12px 12px 24px 12px;
    }

    .info {
      margin-top: 12px;
      border-radius: 24px;
      background-color: #ffffff;
      display: flex;
      flex-direction: row;
      padding: 24px 12px 24px 12px;

      .name {
        flex: 1;
        color: #96979f;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .address-item {
        flex: 5;
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        position: relative;

        .address {
          color: #96979f;
        }

        .right {
          position: absolute;
          right: 0;
        }
      }
    }
  }

  .operation {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    padding: 12px;
    gap: 8px;

    .cart {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .text {
        font-size: 10px;
      }
    }

    .button {
      justify-content: center;
      align-items: center;
      flex: 2;
    }
  }

  .address-item {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;

    position: relative;

    .region {
      font-size: 12px;
      color: #999999;
    }

    .address {
      font-size: 16px;
    }

    .people {
      display: flex;
      flex-direction: row;
      gap: 8px;
      font-size: 12px;

      .name {
        color: #000000;
      }

      .phone {
        color: #999999;
      }
    }

    .select {
      position: absolute;
      top: calc(50% - 22rpx);
      right: 12px;
    }
  }
}
</style>
